<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--
        IE=edge：让IE使用最新的渲染模式，针对ie8 (7,8的渲染模式是不一样的)
        http://blog.csdn.net/www3300300/article/details/12992489
    -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
        针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1
        http://www.cnblogs.com/yuzhongwusan/p/4184923.html
    -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：-->
<meta name="renderer" content="webkit">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="websrc/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="websrc/css/common.css">
<link rel="stylesheet" href="websrc/css/login.css">


<!--下面这一大块的注释是说:"为了让IE9以下的浏览器支持响应式和HTML5标签.需要引入下面两个JS文件"-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="websrc/js/jquery-3.2.1.js"></script>
<script src="websrc/js/mydeck.js"></script>
<script type="text/javascript">
$(function() {
	$("#zcyz").attr("disabled", true);
	$('#user_name').blur(function() {
		if ($(this).val().trim().length == 0) {
			return;
		} else {
			$.ajax({
				type : "get",
				url : "/memorypalace/useraction_checkUserName.action",
				data : "userName=" + $(this).val().trim(),
				success : function(msg) {
					if(msg=="0"){
						$('#check').text("该用户已存在，请重新输入");
						 $("#zcyz").attr("disabled", true);
                 
					}else{
						$('#check').text("");
						$("#zcyz").attr("disabled", false);
					}
				}
			});
		}
	});
		
	 $('#user_name').blur(function () {  
	        //asdf@asdf.asdf  
	        var mailvalue = $(this).val().trim(); 
	        var reg = /^[\w-]{1,12}/;
	        if (mailvalue == null || reg.test(mailvalue)==false) {  
	        	$('#check4').text("用户名格式错误");
	        	$("#zcyz").attr("disabled", true);
	        } else{
	        	$('#check4').text("");
	        	$("#zcyz").attr("disabled", false);
	        }
	 });
	        
    $('#password').blur(function () { 
        if ($(this).val().trim().length == 0) {  
            //alert("密码不能为空！"); 
        	$('#check2').text("密码不能为空");
        	$("#zcyz").attr("disabled", true);
        }else{
        	$('#check2').text("");
        	$("#zcyz").attr("disabled", false);
        }  
    });  
    $('#passwordensure').blur(function () {  
        if ($(this).val().trim() != $('#password').val().trim()) {  
            //alert("两次输入密码不一致！");
        	$('#check3').text("两次输入密码不一致");
        	$("#zcyz").attr("disabled", true);
        }else{
        	$('#check3').text("");
        	$("#zcyz").attr("disabled", false);
        } 
    });  
    
 
			
    $('#user_email').blur(function () {   
    $.ajax({
				type : "get",
				url : "/memorypalace/useraction_checkUserEmail.action",
				data : "userEmail=" + $(this).val().trim(),
				success : function(msg) {
					if(msg=="0"){
						$('#check1').text("该邮箱已存在，请重新输入");
						 $("#zcyz").attr("disabled", true);
                 
					}else{
						$('#check1').text("");
						$("#zcyz").attr("disabled", false);
					}
				}
			});
			 
        //asdf@asdf.asdf  
        var mailvalue = $(this).val().trim();  
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;  
        if (mailvalue == null || myreg.test(mailvalue)==false) {  
        	//alert("邮箱格式错误");
        	$('#check1').text("请重新输入邮箱号");
        	$("#zcyz").attr("disabled", true);
        }  
        else {  
        	$('#check1').text("");
        	$("#zcyz").attr("disabled", false);
        }  
    });  
});



</script>

</head>
<body>
	<div class="header clearfix">
    <!--<div class="header-left clearfix">-->
        <!--<div class="logo">LOGO</div>-->
        <!--<div class="projectName">记忆宫殿</div>-->
        <!--<div class="projectEnglishName">Memory Palace</div>-->
    <!--</div>-->
    <!--<div class="header-middle">-->
        <!--个人首页/学习列表/浏览牌组/知识结构/我的商城-->
    <!--</div>-->
    <!--<div class="header-right">-->
        <!--wing-->
    <!--</div>-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand header-left clearfix" href="#">
                    <div class="logo">LOGO</div>
                    <div class="projectName">记忆宫殿</div>
                    <div class="projectEnglishName">Memory Palace</div>
                </a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right" style="padding-top: 28px;padding-right: 10px">
					<li><span>已有帐号？<a href="login.jsp">请登录</a></span></li>					
				</ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div id="wrapper" class="login-page">
    <div id="login_form" class="form">
        <form class="login-form" action="<c:url value="/useraction_registerUser.action"></c:url>" method="post">
        <p id="check4" style="color:red"></p>
        <p id="check" style="color:red"></p>
            <input type="text" placeholder="用户名" name ="userName" id="user_name"/>
            <p id="check1" style="color:red"></p>
            <input type="text" placeholder="邮箱" name="userEmail" id="user_email">
             <p id="check2" style="color:red"></p>
            <input type="password" placeholder="密码" name="userPwd" id="password"/>
             <p id="check3" style="color:red"></p>
            <input type="password" placeholder="确认密码" id="passwordensure" />
            <input style="background-color:#43A047;color: white;" type="submit" value="注册" id="zcyz"/>
        </form>
    </div>
</div>
	
	



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



	<!--中:必须在JS文件引入之前引入JQ文件,这里src引用的是本地.线上建议使用CDN引用)
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed，bootstrap.min.js是基于jquery的 -->
	<script src="websrc/js/bootstrap.min.js"></script>
</body>
</html>